<template>
<!-- 汇总显示 -->
  <div class="page">
    <div class="top">
      <div class="left">
          <span>合计：<span>{{amount}}</span></span>

      </div>
      <div class="right">

      </div>
    </div>
    <div class="list">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        class="e-table"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
      >
        <el-table-column
          label="汇总编号"
          width="200"
          prop="billNo">
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="汇总机构"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="authorizedQuantity"
          label="核准数量"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="authorizedPrice"
          label="核准单价"
          width="250"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="核准金额"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="purchasingUnitName"
          label="集中采购单位"
          width="250"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="procurementMethod"
          label="采购方式"
          width="100"
          show-overflow-tooltip
        >
        <template slot-scope="{ row }">
            <span>{{
            ["邀请招标", "公开招标","询价","竞争性谈判","单一性来源","甲控（业主招标）"][row.procurementMethod]
            }}</span>
        </template>
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>
<script>
import request from '@/api/materials/plan.js'
export default {

    components: {
    },
    data () {
        return {
            dialogVisibleSearch: false,
            tableData: [],
            dtlId: '',
            amount: '',
        }
    },
    created () {
        this.dtlId = this.$route.query.billid
        this.getData()

    },
    mounted () {},
    methods: {
        getData () {
            let arr = []
            arr.push(this.dtlId)
            request.getData(arr).then(res=>{
                this.tableData = res
                let num = 0
                this.tableData.forEach(item=>{
                    num += Number(item.amount)
                })
                this.amount = num
                this.amount = this.amount.toFixed(2)
            })
        },
        // //关闭
        // close () {
        //     this.$router.push('/totalPlan')
        // },
    },
}
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgb(239, 242, 246);
  border: 1px solid #ccc;
  border-radius: 5px;
  .top {
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    .left {
      flex: 1;
      ::v-deep.el-button--mini {

        margin-left: 5px;
        color: #fff;
        background-color: rgb(122, 168, 24);
      }
    }
    .right {
      display: flex;
      width: 300px;
    }
  }
  .list {
    flex: 1;
    margin-top: 10px;
    ::v-deep.el-table .cell {
    text-align: center;
}
::v-deep.el-steps--simple{
    background: #eff2f6;
    margin-bottom: 10px;
}
    #iconEdit:hover{
    color: red;

}
  }
  .bottom {
    height: 50px;
    padding-bottom: 20px;
    position: relative;
  }
.el-button{
    width: 80px;
    position: absolute;
    bottom: 30px;
    right:20px;
}
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 10px; // 纵向滚动条
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 5px;

  }

}
</style>